import React, { memo, ReactNode } from 'react';
import { TabBar } from 'antd-mobile';
import { routes } from '../../routes/menu';
import { useGoTo, useMatchedRoute } from '../../hooks';
import SvgWrapper from '../SvgWrapper';
import style from './index.module.less';

interface IProps {
  children?: ReactNode
}

// TabBar标签栏--底部

const Bottom: React.FC<IProps> = () => {
  const route = useMatchedRoute();
  const { go } = useGoTo();
  const onTabChangeHandler = (key: string) => {
    go(key);
  };

  const iconRender = (is: boolean, icon?: string) => (
    <SvgWrapper
      src={icon}
      color={is ? '#01979a' : '#999999'}
    />
  );

  if (!route?.isMenu) {
    return null;
  }
  return (
    <div className={style.container}>
      <TabBar onChange={onTabChangeHandler} activeKey={route?.key}>
        {routes.filter((it) => it.isMenu).map((item) => (
          <TabBar.Item
            key={item.key}
            title={item.name}
            icon={(is) => iconRender(is, item.icon)}
          />
        ))}
      </TabBar>
    </div>
  );
};

export default memo(Bottom);
